<template>
  <div class="iframe-container">
    <div class="overlay" style="    display: flex; flex-direction: row-reverse;    align-items: center;">
      <div class="ant-space-item" style="margin-right: 20px;">
        <button type="button" class="ant-btn ant-btn-primary" @click="jump">
          <span> 返回</span>
        </button>
      </div>
    </div>
    <iframe id="myIframe" :src="url" />
  </div>
</template>
<script>


export default {

  data() {
    return {
      url: null,
    }
  },

  mounted() {
    /**
     * iframe-宽高自适应显示
     */
    function changeMobsfIframe() {
      const mobsf = document.getElementById('myIframe');
      const deviceWidth = document.body.clientWidth;
      const deviceHeight = document.body.clientHeight;
      mobsf.style.width = (Number(deviceWidth) - 220) + 'px'; //数字是页面布局宽度差值
      mobsf.style.height = (Number(deviceHeight) - 80) + 'px'; //数字是页面布局高度差
    }

    changeMobsfIframe()

    window.onresize = function () {
      changeMobsfIframe()
    }

    let data = localStorage.getItem('data');

    let arr = JSON.parse(data)


    this.url = process.env.VUE_APP_BASE_SER_HOST + ":8887/#/analysisReasoning?projectId=" + arr.project_id

  },



  async created() {

  },
  methods: {

    jump() {

      this.$router.push({ path: '/modelextraction/page' });
    }

  }
}
</script>



<style lang="scss" scoped>
.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 1.5%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.85);
  border-color: #e3e4e6;
  background: #fff;
  outline: 0;
}

.ant-btn-primary {
  color: #fff;
  border-color: #2f54eb;
  background: #2f54eb;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

/* IFRAME 的容器 */
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* IFRAME 样式 */
#myIframe {
  width: 100%;
  height: 100%;
  border: none; /* 移除边框 */
}

/* 遮挡层样式 */
.overlay {
  position: absolute;
  top: 0;
  // left: 60%;
  width: 100%;
  height: 50px; /* 遮挡的高度 */
  background-color: #ebf1f9; /* 可以根据需要调整颜色 */
  z-index: 1; /* 确保遮挡层位于 IFRAME 之上 */
}
</style>
